<div th:fragment="html">
    <script>
        $(function(){
            var data4Vue2 = {
                statistics:{home:'',chatroom:''}
            };
            //ViewModel
            var vue = new Vue({
                el: '#workingArea2',
                data: data4Vue2,
                mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                    this.get();
                },
                methods: {
                    get:function () {
                        var url = "getStatistics";
                        axios.get(url).then(function (reponse) {
                            vue.statistics=reponse.data;
                        })
                    },

                    jump1:function () {
                        swal({
                                title: "既然来了，点个星星再走呗",
                                text: "听说点了星星的人都一夜暴富了",
                                type: "success",
                                confirmButtonText: "立即前往！",
                            },
                            function(isConfirm){
                                if (isConfirm) {
                                    self.location="https://github.com/baixf-xyz"
                                }
                            });
                    },
                    jump2:function () {
                        swal({
                                title: "恭喜你捡到了一本武林秘籍，经验值+999",
                                text: "你会进入一个菜鸡的博客",
                                type: "success",
                                confirmButtonText: "立即前往！",
                            },
                            function(isConfirm){
                                if (isConfirm) {
                                    self.location="https://blog.baixf.xyz"
                                }
                            });
                    },
                    jump3:function () {
                        swal({
                                title: "QUST官网",
                                text: "学校官网了解一下……",
                                type: "success",
                                confirmButtonText: "立即前往！",
                            },
                            function(isConfirm){
                                if (isConfirm) {
                                    self.location="https://www.qust.edu.cn/"
                                }
                            });
                    },
                    jump4:function () {
                        swal({
                                title: "高密校区",
                                text: "高密校区了解一下……",
                                type: "success",
                                confirmButtonText: "立即前往！",
                            },
                            function(isConfirm){
                                if (isConfirm) {
                                    self.location="https://gmxq.qust.edu.cn/"
                                }
                            });
                    }

                }
            });
        });
    </script>

    <div class="jumbotron text-center" style="margin:0 " id="workingArea2">
        友链~~
        <p>
            <a href="#" @click="jump1">Github地址(Github点个 <img src="img/fore/star.jpg" alt="" width="11px">  <img src="img/fore/star.jpg" alt="" width="11px">      )</a>
            <a href="#" @click="jump2"  style="margin-left: 200px">个人博客</a>
        </p>

        <p>
            <a href="#" @click="jump3" >QUST官网</a>
            <a href="#" @click="jump4" style="margin-left: 200px">高密校区官网</a></p>
        <p>
            <a href="#">首页访问量：{{statistics.home}}，聊天室访问量：{{statistics.chatroom}}</a>
        </p>
    </div>
    <footer class="main-footer">
            <div class="row">
                <div class="col-sm-12">
                    <h5 align="center">QUST高密校区-校园租房网</h5>
                </div>
            </div>
    </footer>
    </div>